<script setup>
definePageMeta({
	layout: "flat",
})

useHead({
	title: 'HLS: Рентген',
})

const urlHome = useUrlRasp();
console.log(urlHome.value);
const route = useRoute()
const uid = ref(0);
const patient = ref('');
const pending = ref('');
async function onEnter() {
	patient.value = '';
	pending.value = true;
	const { data: patientInfo } = await useLazyFetch('http://localhost/uid/' + uid.value, {
		mode: 'cors',
		server: 'false'
	})
	console.log("patientInfo", patientInfo)
	patient.value = patientInfo.value;
	pending.value = false;
}
console.log(route.query.uid)
if (typeof route.query.uid !== undefined && route.query.uid > 0) {
	uid.value = route.query.uid
	onEnter()
}
const isOpen = ref(false);
const hrefBase = ref("http://localhost/img/");
const hrefFile = ref("");
const teeth = ref([]);
const isOpenMenu = ref(false)

defineShortcuts({
	escape: {
		usingInput: true,
		handler: () => {
			isOpenMenu.value = false
		}
	}
})

function openModal(item) {
	console.log("openModal", item)
	if (item === undefined) {
		return
	}
	if (item.length === 1) {
		hrefFile.value = "http://localhost:8080?input=" + hrefBase.value + item[0].ImageCode
		isOpen.value = true
	} else if (item.length > 1) {
		teeth.value = item
		isOpenMenu.value = true
	} else if (typeof item === 'object') {
		hrefFile.value = "http://localhost:8080?input=" + hrefBase.value + item.ImageCode
		isOpen.value = true
	}
}

</script>

<template>
	<div>
		<h1></h1>
		<br>
		<h1>Меню</h1>
		<br>
		<ul>
			<li class="pb-2">
				<NuxtLink to="/menu">
					<UButton>Меню</UButton>
				</NuxtLink>
			</li>
		</ul>
		<br>
		<h1>Поиск</h1>
		<div class="max-w-xs">
			<UInput color="primary" size="md" variant="outline" placeholder="Искать по номеру карты..." v-model="uid"
				v-on:keyup.enter="onEnter" />
		</div>
		<div v-if="pending" class="text-2xl font-serif">
			Загрузка
		</div>
		<div v-if="patient === '' && !pending" class="text-2xl font-serif">
			Снимки не найдены
		</div>
		<div v-if="patient !== ''">
			<div>Пациент: {{ patient.PatientNameLast }} {{ patient.PatientNameFirst }}, {{ patient.PatientDR }}</div>
			<UTabs :items="patient.SchemeList" class="w-full">
				<template #item="{ item }">
					<!-- <template #header>
					</template> -->
					{{ item.SchemeName }}
					{{ item.SchemeDate }}
					<!-- {{ item.ImageList }} -->
					<div v-if="item.SchemeName === 'ПОЛНЫЕ ВЕРХНИЙ И НИЖНИЙ ЗУБНЫЕ РЯДЫ (21)'"
						class="grid place-items-center">
						<RentSchemeS21 :scheme="item.ImageList" @tooth="openModal" />
					</div>
					<div v-else-if="item.SchemeName === 'ПОЛНЫЕ ВЕРХНИЙ И НИЖНИЙ ЗУБНЫЕ РЯДЫ (18)'"
						class="grid place-items-center">
						<RentSchemeS18 :scheme="item.ImageList" @tooth="openModal" />
					</div>
					<div v-else-if="item.SchemeName === 'КОНТРОЛЬНАЯ'" class="grid place-items-center">
						<RentSchemeScont :scheme="item.ImageList" @tooth="openModal" />
					</div>
					<div v-else-if="item.SchemeName === 'ПРИКУСНАЯ'" class="grid place-items-center">
						<RentSchemeSprik :scheme="item.ImageList" @tooth="openModal" />
					</div>
					<div v-else>{{ item.SchemeName }}</div>
					<!-- <template #footer>
				</template> -->
				</template>
			</UTabs>
			<UModal v-model="isOpen">
				<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
					<template #header>
					</template>

					<iframe ref="myIframe" :src="hrefFile" :width="500" :height="700"></iframe>
					<template #footer>
						<UButton label="Закрыть" icon="i-heroicons-x-mark" color="primary" @click="isOpen = false" />
					</template>
				</UCard>
			</UModal>
			<USlideover v-model="isOpenMenu" :overlay="false">
				<div class="p-4 flex-1">
					<div v-for="one in teeth" :key="one.ImageCode" class="py-2">
						<UButton @click="openModal(one)" variant="ghost">Снимок зуба № {{ one.ImageNumber }} от {{
							one.ImageDate }}
						</UButton>
					</div>
				</div>
			</USlideover>
			<!-- <div v-for="scheme in patient.SchemeList" :key="scheme.SchemeID">
			</div> -->
			<!-- {{ patient }} -->
		</div>
	</div>
</template>
